<template>
  <div class="APP-main-box">
    <div class="dashboard-box">
      <div style="float: left;width: 345px;">
        <div class="warning-box" style="width: 330px; height: 150px;position: relative;">
          <p class="mess-p">
            <span>选择设备：</span>
            <el-select v-model="value" placeholder="请选择" size="mini" @change="changeDevice">
              <el-option
                v-for="item in devices"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
          </p>
          <p class="mess-p">设备编号：{{ value }}</p>
          <p class="mess-p">系统时间：{{ dateTime.nowDate + ' ' + dateTime.nowTime }}</p>
        </div>
        <div class="warning-box" style="width: 330px; height: 150px;position: relative;">
          <span id="normalmess" class="one-span">
            <p>{{ this.wmessNormal }}</p>
            <p>满足率</p>
          </span>
          <span id="warningmess" class="one-span">
            <p>{{ this.wmessWarning }}</p>
            <p>异常率</p>
          </span>
          <div id="normal-cycle-e"></div>
          <div id="warning-cycle-e"></div>
        </div>
      </div>
      <div class="warning-box" style="width: 680px; height: 315px;">
        <p class="box-title">
          <i class="el-icon-success" style="color: #67C23A;"></i>
          <span>各项状态分布</span>
          <span
            style="float: right;font-size: 12px;margin-right: 10px;"
          >今日总数据：{{ this.tmessCount.allcount }}</span>
        </p>
        <div id="main-bar-e"></div>
      </div>
      <div class="warning-box" style="width: 200px; height: 315px;">
        <p class="box-title">
          <i class="el-icon-success" style="color: #67C23A;"></i>
          <span>各项满足率</span>
        </p>
        <p class="two-p">
          <span>温度：</span>
          <el-progress
            :text-inside="true"
            :stroke-width="16"
            :percentage="this.pointRate.temp"
            status="exception"
            style="display: inline-block;width: 60%;"
          ></el-progress>
        </p>
        <p class="two-p">
          <span>湿度：</span>
          <el-progress
            :text-inside="true"
            :stroke-width="16"
            :percentage="this.pointRate.hum"
            style="display: inline-block;width: 60%;"
          ></el-progress>
        </p>
        <p class="two-p">
          <span>土壤温度：</span>
          <el-progress
            :text-inside="true"
            :stroke-width="16"
            :percentage="this.pointRate.soiltemp"
            status="warning"
            style="display: inline-block;width: 42%;"
          ></el-progress>
        </p>
        <p class="two-p">
          <span>土壤湿度：</span>
          <el-progress
            :text-inside="true"
            :stroke-width="16"
            :percentage="this.pointRate.soilhum"
            color="#b6a2df"
            style="display: inline-block;width: 42%;"
          ></el-progress>
        </p>
        <p class="two-p">
          <span>光照强度：</span>
          <el-progress
            :text-inside="true"
            :stroke-width="16"
            :percentage="this.pointRate.light"
            status="success"
            style="display: inline-block;width: 42%;"
          ></el-progress>
        </p>
        <p class="two-p">
          <span>ph值：</span>
          <el-progress
            :text-inside="true"
            :stroke-width="16"
            :percentage="this.pointRate.ph"
            color="#2ec8ca"
            style="display: inline-block;width: 60%;"
          ></el-progress>
        </p>
      </div>
      <div class="warning-box" style="width: 330px;height: 350px;position: relative;">
        <p class="box-title">
          <i class="el-icon-success" style="color: #67C23A;"></i>
          <span>整体状态分布</span>
        </p>
        <div id="all-cycle-e"></div>
      </div>
      <div class="warning-box" style="width: 895px; height: 350px;">
        <p class="box-title" @dblclick="ifshowMore = true">
          <i class="el-icon-success" style="color: #67C23A;"></i>
          <span>今日数据</span>
          <span class="help-tips" style="cursor:pointer">（双击获取更多操作）</span>
        </p>
        <div id="table-today">
          <el-table :data="tableData" style="width: 100%" size="mini" height="280">
            <el-table-column label="日期" width="120" align="center">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.datetime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="编号" width="80" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.devicenum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="空气温度(°C)" width="90" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.temp }}</span>
              </template>
            </el-table-column>
            <el-table-column label="空气湿度(%)" width="90" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.hum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="土壤温度(°C)" width="105" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.soiltemp }}</span>
              </template>
            </el-table-column>
            <el-table-column label="土壤湿度(%)" width="90" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.soilhum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="光照强度" width="90" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.light }}</span>
              </template>
            </el-table-column>
            <el-table-column label="ph值" width="70" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.ph }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-tag
                  size="mini"
                  :type="scope.row.result == '优秀' ? 'success' : scope.row.result == '良好' ? '' : scope.row.result == '一般' ? 'info' : 'danger'"
                >{{ scope.row.result }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <transition name="el-fade-in">
      <div class="table-showmore" v-show="ifshowMore">
        <div class="center-box">
          <p class="box-title">
            <i class="el-icon-success" style="color: #67C23A;"></i>
            <span>今日数据</span>
          </p>
          <div class="table-more-select">
            <el-form :inline="true" :model="formSelect" class="demo-form-inline">
              <el-form-item label="时间：">
                <el-time-select
                  placeholder="起始时间"
                  v-model="formSelect.startTime"
                  :picker-options="{
                    start: '00:00',
                    step: '00:30',
                    end: '23:30'
                  }"
                  size="small"
                ></el-time-select>
                <span>to</span>
                <el-time-select
                  placeholder="结束时间"
                  v-model="formSelect.endTime"
                  :picker-options="{
                    start: '00:30',
                    step: '00:30',
                    end: '24:00',
                    minTime: formSelect.startTime
                  }"
                  size="small"
                ></el-time-select>
              </el-form-item>
              <el-form-item label="状态类型：">
                <el-select v-model="formSelect.type" placeholder="状态类型" size="small">
                  <el-option
                    v-for="item in selectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit" size="small">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table-more">
            <el-table :data="selectTableData" style="width: 100%" size="mini" height="430">
              <el-table-column label="日期时间" width="110" align="center">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.datetime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="设备号" width="70" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.devicenum }}</span>
                </template>
              </el-table-column>
              <el-table-column label="空气温度(°C)" width="90" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.temp }}</span>
                </template>
              </el-table-column>
              <el-table-column label="空气湿度(%)" width="90" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.hum }}</span>
                </template>
              </el-table-column>
              <el-table-column label="土壤温度(°C)" width="105" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.soiltemp }}</span>
                </template>
              </el-table-column>
              <el-table-column label="土壤湿度(%)" width="90" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.soilhum }}</span>
                </template>
              </el-table-column>
              <el-table-column label="光照强度" width="70" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.light }}</span>
                </template>
              </el-table-column>
              <el-table-column label="ph值" width="70" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.ph }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" width="70" align="center">
                <template slot-scope="scope">{{ scope.row.result }}</template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-more-paging">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="50"
                layout="total, prev, pager, next"
                :total="selectTableData.length"
              ></el-pagination>
            </div>
          </div>
        </div>
        <svg-icon icon-class="close" @click="ifshowMore = false"></svg-icon>
      </div>
    </transition>
  </div>
</template>

<script>
import {
  getWarningMess,
  getTypeMess,
  getTableData,
  selectTableData,
  deleteDataById
} from "@/api/mainmess.js";

import { getAllDevice } from "@/api/connect.js";

export default {
  data() {
    return {
      dateTime: {
        nowTime: "",
        nowDate: ""
      },
      wmessCount: {
        alldatacount: 949,
        allcount: 225,
        tempcount: 38,
        humcount: 69,
        soilTempcount: 85,
        soilHumcount: 23,
        phcount: 49,
        lightcount: 39
      },
      // wmessCount: {
      //   alldatacount: 0,
      //   allcount: 0,
      //   tempcount: 0,
      //   humcount: 0,
      //   cotwocount: 0,
      //   tvoccount: 0,
      //   aircount: 0,
      //   presscount: 0,
      //   pm25count: 0
      // },
      pointRate: {
        temp: 98,
        hum: 97,
        soiltemp: 99,
        soilhum: 98,
        light: 96,
        ph: 95
      },
      wmessNormal: "89%",
      wmessWarning: "11%",
      tmessCount: {
        // allcount: 0,
        // greatcount: [0, 0, 0, 0, 0, 0, 0],
        // normalcount: [0, 0, 0, 0, 0, 0, 0],
        // infocount: [0, 0, 0, 0, 0, 0, 0],
        // warncount: [0, 0, 0, 0, 0, 0, 0],
        // greatnum: 0,
        // normalnum: 0,
        // infonum: 0,
        // warnnum: 0
        alldatacount: 949,
        allcount: 225,
        tempcount: 38,
        humcount: 69,
        soilTempcount: 85,
        soilHumcount: 23,
        phcount: 49,
        lightcount: 39
      },
      devices: [],
      value: "",
      tableData: [],
      selectTableData: [],
      ifshowMore: false,
      selectOptions: [
        { label: "优秀", value: "great" },
        { label: "良好", value: "normal" },
        { label: "一般", value: "info" },
        { label: "危险", value: "warn" },
        { label: "所有", value: "all" }
      ],
      formSelect: {
        startTime: "",
        endTime: "",
        type: "all"
      },
      currentPage: 1
    };
  },

  created() {
    this.getDevice();
    this.getMess();
    this.getSelectData();
    this.currentTime();
  },

  methods: {
    drawCycle() {
      var normalChart = echarts.init(document.getElementById("normal-cycle-e"));
      var warnChart = echarts.init(document.getElementById("warning-cycle-e"));
      var BorderWidth = "8";

      //反方向剩下部分的样式
      var placeHolderStyle = {
        normal: {
          color: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0.05)",
          borderWidth: BorderWidth
        },
        emphasis: {
          color: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0.1)",
          borderWidth: BorderWidth
        }
      };
      // 绘制图表
      normalChart.setOption({
        backgroundColor: "transparent",
        tooltip: {
          show: false
        },
        series: [
          {
            name: "满足率",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [49, 50],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "outside"
                },
                labelLine: {
                  show: false,
                  length: 35,
                  smooth: 0.5
                },
                borderWidth: BorderWidth,
                shadowBlur: 40,
                borderColor: "#24ae94",
                shadowColor: "rgba(0, 0, 0, 0)" //边框阴影
              }
            },
            data: [
              {
                value: this.wmessCount.alldatacount - this.wmessCount.allcount,
                name: "满足率"
              },
              {
                value: this.wmessCount.allcount,
                name: "",
                itemStyle: placeHolderStyle
              }
            ]
          }
        ]
      });
      warnChart.setOption({
        backgroundColor: "transparent",
        tooltip: {
          show: false
        },
        series: [
          {
            name: "异常率",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [49, 50],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "outside"
                },
                labelLine: {
                  show: false,
                  length: 35,
                  smooth: 0.5
                },
                borderWidth: BorderWidth,
                shadowBlur: 40,
                borderColor: "#d97a80",
                shadowColor: "rgba(0, 0, 0, 0)" //边框阴影
              }
            },
            data: [
              {
                value: this.wmessCount.allcount,
                name: "异常率"
              },
              {
                value: this.wmessCount.alldatacount - this.wmessCount.allcount,
                name: "",
                itemStyle: placeHolderStyle
              }
            ]
          }
        ]
      });
    },
    drawBar() {
      var mainCharts = echarts.init(document.getElementById("main-bar-e"));

      mainCharts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ["#67C23A", "#409EFF", "#909399", "#F56C6C"],
        legend: {
          x: "45%",
          y: "5px",
          data: ["优秀", "良好", "一般", "危险"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["温度", "湿度", "土壤温度", "土壤湿度", "光照强度", "ph值"]
          }
        ],
        yAxis: [
          {
            type: "value"
            // min: 0,
            // max: parseInt(this.tmessCount.allcount/200)*200,
            // splitNumber: 5
          }
        ],
        series: [
          {
            name: "优秀",
            type: "bar",
            barWidth: "35px",
            stack: "style",
            data: this.tmessCount.greatcount
          },
          {
            name: "良好",
            type: "bar",
            stack: "style",
            data: this.tmessCount.normalcount
          },
          {
            name: "一般",
            type: "bar",
            stack: "style",
            data: this.tmessCount.infocount
          },
          {
            name: "危险",
            type: "bar",
            stack: "style",
            data: this.tmessCount.warncount
          }
        ]
      });
    },
    drawPie() {
      var pieCharts = echarts.init(document.getElementById("all-cycle-e"));

      pieCharts.setOption({
        backgroundColor: "transparent",
        tooltip: {
          show: true,
          type: "axis"
        },
        color: ["#24ae94", "#ffb880", "#5bb0f0", "#d97a80"],
        series: [
          {
            name: "状态分布",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: true, //鼠标移入变大
            radius: [30, 100],
            roseType: "radius",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside"
                },
                labelLine: {
                  show: true,
                  length: 15,
                  smooth: 0.5
                },
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.2)" //边框阴影
              }
            },
            data: [
              {
                value: this.tmessCount.greatnum,
                name: "优秀"
              },
              {
                value: this.tmessCount.normalnum,
                name: "良好"
              },
              {
                value: this.tmessCount.infonum,
                name: "一般"
              },
              {
                value: this.tmessCount.warnnum,
                name: "危险"
              }
            ]
          }
        ]
      });
    },
    //时间函数
    currentTime() {
      setInterval(this.getDateTime, 1000);
    },
    getDateTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let week = new Date().getDay();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();

      let nowTime = hh + ":" + mf + ":" + ss;
      let nowDate = yy + "年" + mm + "月" + dd + "日";
      this.dateTime.nowDate = nowDate;
      this.dateTime.nowTime = nowTime;
    },
    getDevice() {
      // getAllDevice().then(response => {
      //   console.log(response.data);
      //   this.devices = response.data.data;
      //   this.value = this.devices[0].value;
      // });
      const response = {
        code: 801,
        flag: true,
        message: "成功获取最新数据",
        data: [
          {
            value: "01",
            label: "茂名实验基地一号"
          },
          {
            value: "02",
            label: "茂名实验基地二号"
          }
        ]
      };
      this.devices = response.data.data;
      this.value = this.devices[0].value;
    },
    getMess() {
      // getWarningMess(this.value).then(resp => {
      const resp = {
        code: 801,
        flag: true,
        message: "成功获取信息",
        data: {
          alldatacount: 949,
          allcount: 225,
          tempcount: 38,
          humcount: 69,
          soilTempcount: 85,
          soilHumcount: 23,
          phcount: 49,
          lightcount: 39
        }
      };
      console.log(resp.data);
      const response = resp.data;
      if (response.flag) {
        const res = response.data;
        //赋值
        this.wmessCount = res;
        this.wmessNormal =
          (
            ((res.alldatacount - res.allcount) / res.alldatacount) *
            100
          ).toFixed(1) + "%";
        this.wmessWarning =
          ((res.allcount / res.alldatacount) * 100).toFixed(1) + "%";
        this.pointRate.temp = parseInt(
          ((res.alldatacount - res.tempcount) / res.alldatacount) * 100
        );
        this.pointRate.hum = parseInt(
          ((res.alldatacount - res.humcount) / res.alldatacount) * 100
        );
        this.pointRate.soiltemp = parseInt(
          ((res.alldatacount - res.soilTempcount) / res.alldatacount) * 100
        );
        this.pointRate.soilhum = parseInt(
          ((res.alldatacount - res.soilHumcount) / res.alldatacount) * 100
        );
        this.pointRate.light = parseInt(
          ((res.alldatacount - res.lightcount) / res.alldatacount) * 100
        );
        this.pointRate.ph = parseInt(
          ((res.alldatacount - res.phcount) / res.alldatacount) * 100
        );
      }

      this.drawCycle();
      // });
      // getTypeMess(this.value).then(response => {
      const response1 = {
        code: 801,
        flag: true,
        message: "成功获取信息",
        data: {
          allcount: 1323,
          greatcount: [923, 892, 876, 900, 912, 878],
          normalcount: [223, 258, 278, 245, 222, 297],
          infocount: [65, 64, 58, 70, 76, 34],
          warncount: [12, 9, 11, 8, 13, 14],
          greatnum: 829,
          normalnum: 236,
          infonum: 87,
          warnnum: 5
        }
      };
      this.tmessCount = response1.data.data;
      console.log(this.tmessCount);
      this.drawBar();
      this.drawPie();
      // });
      // getTableData(this.value).then(response => {
      this.tableData = {
        code: 801,
        flag: true,
        message: "成功获取最新数据",
        data: [
          {
            id: "861526136793862799",
            datetime: "03:33:53",
            devicenum: 1,
            temp: 22.5,
            hum: 51.4,
            soiltemp: 29.4,
            soilhum: 43.2,
            light: 2109,
            ph: 4,
            result: "良好"
          },
          {
            id: "760475973411671",
            datetime: "09:25:03",
            devicenum: 1,
            temp: 27.3,
            hum: 61.7,
            soiltemp: 21.7,
            soilhum: 56.3,
            light: 2036,
            ph: 8,
            result: "一般"
          },
          {
            id: "711164558665443343",
            datetime: "21:40:39",
            devicenum: 1,
            temp: 25.2,
            hum: 50.3,
            soiltemp: 24.9,
            soilhum: 40.1,
            light: 3584,
            ph: 5,
            result: "良好"
          },
          {
            id: "239444214078613",
            datetime: "03:47:44",
            devicenum: 1,
            temp: 25.1,
            hum: 58.3,
            soiltemp: 28.7,
            soilhum: 57.6,
            light: 4060,
            ph: 7,
            result: "优秀"
          },
          {
            id: "561136892071483",
            datetime: "23:03:44",
            devicenum: 1,
            temp: 28.3,
            hum: 68.6,
            soiltemp: 25.7,
            soilhum: 53.8,
            light: 2073,
            ph: 5,
            result: "良好"
          },
          {
            id: "371753587344811",
            datetime: "16:01:00",
            devicenum: 1,
            temp: 25.4,
            hum: 66.8,
            soiltemp: 20.6,
            soilhum: 58.8,
            light: 4035,
            ph: 5,
            result: "良好"
          },
          {
            id: "771472623104687",
            datetime: "06:37:49",
            devicenum: 1,
            temp: 28.8,
            hum: 60.8,
            soiltemp: 21.4,
            soilhum: 58.7,
            light: 2510,
            ph: 7,
            result: "良好"
          },
          {
            id: "277221855127818498",
            datetime: "07:10:19",
            devicenum: 1,
            temp: 26.5,
            hum: 50.7,
            soiltemp: 22.7,
            soilhum: 56.7,
            light: 3189,
            ph: 7,
            result: "良好"
          },
          {
            id: "996856935703523167",
            datetime: "16:11:21",
            devicenum: 1,
            temp: 24.6,
            hum: 60.6,
            soiltemp: 25.8,
            soilhum: 59.6,
            light: 2049,
            ph: 6,
            result: "良好"
          },
          {
            id: "600481764251146780",
            datetime: "00:28:03",
            devicenum: 1,
            temp: 28.5,
            hum: 63.3,
            soiltemp: 20.7,
            soilhum: 43.1,
            light: 3579,
            ph: 8,
            result: "优秀"
          },
          {
            id: "871781949656857234",
            datetime: "10:20:29",
            devicenum: 1,
            temp: 25.4,
            hum: 65.8,
            soiltemp: 25.3,
            soilhum: 60.8,
            light: 2632,
            ph: 5,
            result: "优秀"
          },
          {
            id: "827933467253489328",
            datetime: "12:03:23",
            devicenum: 1,
            temp: 26.7,
            hum: 56.5,
            soiltemp: 20.5,
            soilhum: 53.2,
            light: 3253,
            ph: 4,
            result: "良好"
          },
          {
            id: "227116450826400",
            datetime: "05:01:19",
            devicenum: 1,
            temp: 23.7,
            hum: 57.6,
            soiltemp: 25.2,
            soilhum: 58.8,
            light: 2191,
            ph: 4,
            result: "良好"
          },
          {
            id: "857417766557711553",
            datetime: "01:24:34",
            devicenum: 1,
            temp: 29.2,
            hum: 59.1,
            soiltemp: 28.6,
            soilhum: 60.4,
            light: 3901,
            ph: 5,
            result: "良好"
          },
          {
            id: "232900697351353",
            datetime: "09:00:05",
            devicenum: 1,
            temp: 29.2,
            hum: 61.2,
            soiltemp: 28.4,
            soilhum: 45.1,
            light: 3582,
            ph: 8,
            result: "优秀"
          },
          {
            id: "124568817180959",
            datetime: "01:03:33",
            devicenum: 1,
            temp: 28.6,
            hum: 58.3,
            soiltemp: 21.7,
            soilhum: 53.2,
            light: 2386,
            ph: 7,
            result: "良好"
          },
          {
            id: "492257207946798744",
            datetime: "21:04:26",
            devicenum: 1,
            temp: 22.2,
            hum: 61.4,
            soiltemp: 21.6,
            soilhum: 45.1,
            light: 2553,
            ph: 6,
            result: "一般"
          },
          {
            id: "576446477217844492",
            datetime: "14:33:18",
            devicenum: 1,
            temp: 28.1,
            hum: 51.6,
            soiltemp: 21.2,
            soilhum: 56.8,
            light: 4171,
            ph: 6,
            result: "一般"
          },
          {
            id: "381413570457634",
            datetime: "22:24:18",
            devicenum: 1,
            temp: 27.8,
            hum: 60.4,
            soiltemp: 27.4,
            soilhum: 41.1,
            light: 2882,
            ph: 7,
            result: "优秀"
          },
          {
            id: "864378194796728",
            datetime: "04:01:32",
            devicenum: 1,
            temp: 27.2,
            hum: 50.5,
            soiltemp: 22.4,
            soilhum: 57.7,
            light: 2193,
            ph: 5,
            result: "良好"
          },
          {
            id: "187759051303946648",
            datetime: "14:07:37",
            devicenum: 1,
            temp: 22.4,
            hum: 67.9,
            soiltemp: 27.6,
            soilhum: 50.9,
            light: 3699,
            ph: 5,
            result: "良好"
          },
          {
            id: "912254249570464",
            datetime: "12:56:04",
            devicenum: 1,
            temp: 25.5,
            hum: 51.2,
            soiltemp: 24.6,
            soilhum: 59.8,
            light: 2836,
            ph: 6,
            result: "优秀"
          },
          {
            id: "652861352854465",
            datetime: "22:55:28",
            devicenum: 1,
            temp: 23.9,
            hum: 64.2,
            soiltemp: 29.8,
            soilhum: 53.9,
            light: 2058,
            ph: 4,
            result: "一般"
          },
          {
            id: "226209157623458",
            datetime: "23:40:01",
            devicenum: 1,
            temp: 22.7,
            hum: 51.5,
            soiltemp: 24.4,
            soilhum: 42.1,
            light: 2541,
            ph: 5,
            result: "良好"
          },
          {
            id: "588525816885577253",
            datetime: "04:39:03",
            devicenum: 1,
            temp: 24.1,
            hum: 69.9,
            soiltemp: 22.3,
            soilhum: 57.3,
            light: 2567,
            ph: 5,
            result: "优秀"
          },
          {
            id: "642134427356441",
            datetime: "05:11:56",
            devicenum: 1,
            temp: 29.3,
            hum: 63.8,
            soiltemp: 27.7,
            soilhum: 47.7,
            light: 3310,
            ph: 7,
            result: "优秀"
          },
          {
            id: "468782481825215",
            datetime: "21:33:45",
            devicenum: 1,
            temp: 23.8,
            hum: 69.7,
            soiltemp: 23.4,
            soilhum: 51.4,
            light: 3719,
            ph: 7,
            result: "良好"
          },
          {
            id: "687965157647406",
            datetime: "15:08:25",
            devicenum: 1,
            temp: 28.2,
            hum: 52.7,
            soiltemp: 28.3,
            soilhum: 54.1,
            light: 2164,
            ph: 5,
            result: "良好"
          }
        ]
      };
      // });
    },
    getSelectData() {
      // selectTableData(
      //   this.value,
      //   this.currentPage,
      //   50,
      //   this.formSelect.startTime,
      //   this.formSelect.endTime,
      //   this.formSelect.type
      // ).then(response => {
      //   this.selectTableData = response.data.data;
      // });
      this.selectTableData = {
        code: 801,
        flag: true,
        message: "成功获取最新数据",
        data: [
          {
            id: "066176431973527326",
            datetime: "00:32:42",
            devicenum: 1,
            temp: 23.2,
            hum: 60.9,
            soiltemp: 23.6,
            soilhum: 43.1,
            light: 2353,
            ph: 5,
            result: "良好"
          },
          {
            id: "566633268641224",
            datetime: "21:25:31",
            devicenum: 1,
            temp: 20.3,
            hum: 58.7,
            soiltemp: 28.7,
            soilhum: 52.3,
            light: 2025,
            ph: 5,
            result: "良好"
          },
          {
            id: "482002382332026789",
            datetime: "02:11:01",
            devicenum: 1,
            temp: 28.8,
            hum: 56.2,
            soiltemp: 25.4,
            soilhum: 53.9,
            light: 2897,
            ph: 8,
            result: "优秀"
          },
          {
            id: "531851346649767",
            datetime: "06:22:28",
            devicenum: 1,
            temp: 20.2,
            hum: 68.8,
            soiltemp: 30.3,
            soilhum: 57.5,
            light: 2467,
            ph: 5,
            result: "优秀"
          },
          {
            id: "636694472278363",
            datetime: "05:25:53",
            devicenum: 1,
            temp: 24.4,
            hum: 61.6,
            soiltemp: 24.8,
            soilhum: 45.8,
            light: 3015,
            ph: 8,
            result: "优秀"
          },
          {
            id: "808336245660941",
            datetime: "04:57:05",
            devicenum: 1,
            temp: 28.4,
            hum: 63.8,
            soiltemp: 30.7,
            soilhum: 42.6,
            light: 2191,
            ph: 5,
            result: "良好"
          },
          {
            id: "356634569746515",
            datetime: "15:49:37",
            devicenum: 1,
            temp: 23.6,
            hum: 52.4,
            soiltemp: 21.1,
            soilhum: 51.2,
            light: 3438,
            ph: 6,
            result: "一般"
          },
          {
            id: "380756491664369",
            datetime: "23:15:07",
            devicenum: 1,
            temp: 21.4,
            hum: 50.6,
            soiltemp: 28.7,
            soilhum: 50.3,
            light: 2658,
            ph: 5,
            result: "一般"
          },
          {
            id: "133509435631565405",
            datetime: "22:27:19",
            devicenum: 1,
            temp: 30.2,
            hum: 62.4,
            soiltemp: 22.5,
            soilhum: 50.6,
            light: 3941,
            ph: 8,
            result: "良好"
          },
          {
            id: "520610271275697367",
            datetime: "09:06:54",
            devicenum: 1,
            temp: 22.2,
            hum: 61.5,
            soiltemp: 27.3,
            soilhum: 50.3,
            light: 3972,
            ph: 5,
            result: "良好"
          },
          {
            id: "238493615425782",
            datetime: "16:27:00",
            devicenum: 1,
            temp: 27.4,
            hum: 50.2,
            soiltemp: 22.5,
            soilhum: 59.5,
            light: 2331,
            ph: 6,
            result: "良好"
          },
          {
            id: "238132517112434663",
            datetime: "18:04:19",
            devicenum: 1,
            temp: 27.5,
            hum: 67.6,
            soiltemp: 21.1,
            soilhum: 48.8,
            light: 3159,
            ph: 6,
            result: "良好"
          },
          {
            id: "431116702575296385",
            datetime: "16:33:58",
            devicenum: 1,
            temp: 23.5,
            hum: 55.8,
            soiltemp: 22.8,
            soilhum: 58.2,
            light: 2679,
            ph: 4,
            result: "一般"
          },
          {
            id: "291589897111260176",
            datetime: "02:14:02",
            devicenum: 1,
            temp: 26.5,
            hum: 65.9,
            soiltemp: 29.2,
            soilhum: 50.6,
            light: 4329,
            ph: 5,
            result: "良好"
          },
          {
            id: "464892279267612",
            datetime: "08:30:48",
            devicenum: 1,
            temp: 24.7,
            hum: 64.4,
            soiltemp: 24.6,
            soilhum: 57.8,
            light: 3483,
            ph: 5,
            result: "良好"
          },
          {
            id: "683165492642367681",
            datetime: "12:44:31",
            devicenum: 1,
            temp: 26.5,
            hum: 55.3,
            soiltemp: 25.9,
            soilhum: 56.6,
            light: 4119,
            ph: 6,
            result: "良好"
          },
          {
            id: "086328372585441",
            datetime: "03:21:23",
            devicenum: 1,
            temp: 29.1,
            hum: 63.5,
            soiltemp: 23.2,
            soilhum: 52.6,
            light: 4448,
            ph: 5,
            result: "优秀"
          },
          {
            id: "362267211232425975",
            datetime: "08:15:27",
            devicenum: 1,
            temp: 26.2,
            hum: 53.3,
            soiltemp: 27.6,
            soilhum: 55.2,
            light: 3987,
            ph: 5,
            result: "良好"
          },
          {
            id: "257587825303635351",
            datetime: "15:12:02",
            devicenum: 1,
            temp: 26.2,
            hum: 53.9,
            soiltemp: 25.6,
            soilhum: 44.7,
            light: 3566,
            ph: 5,
            result: "良好"
          },
          {
            id: "203879271572473",
            datetime: "08:55:26",
            devicenum: 1,
            temp: 25.6,
            hum: 51.4,
            soiltemp: 22.2,
            soilhum: 56.8,
            light: 2349,
            ph: 7,
            result: "优秀"
          }
        ]
      };
    },
    changeDevice() {
      this.getMess();
    },
    handleDelete(id) {
      deleteDataById(id).then(response => {
        console.log(response.message + ":" + id);
        this.getSelectData();
      });
    },
    onSubmit() {
      this.currentPage = 1;
      this.getSelectData();
    },
    handleCurrentChange() {
      this.$message({
        message: "查询新页",
        type: "error"
      });
    }
  }
  //   mounted() {
  //     this.getDevice();
  //     this.getMess();
  //     this.getSelectData();
  //     this.currentTime();
  //   }
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-box {
    width: 1273px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: bold;
    color: #525252;
  }
}

.warning {
  &-box {
    float: left;
    background-color: #fff;
    margin: 15px 0 0 15px;
    border-radius: 6px;
    overflow: hidden;

    #normalmess {
      left: 62px;
      position: absolute;
      top: 35px;

      p {
        text-align: center;
      }
    }

    #warningmess {
      left: 227px;
      position: absolute;
      color: #525252;
      font-size: 14px;
      font-weight: bold;
      top: 35px;

      p {
        text-align: center;
      }
    }

    .two-p {
      float: right;
      width: 85%;
      height: 30px;
      line-height: 30px;
      margin: 0 10px 5px 0;
    }

    .mess-p {
      width: 280px;
      margin: 20px auto;
    }
  }
}

#normal-cycle-e {
  float: left;
  width: 165px;
  height: 150px;
}

#warning-cycle-e {
  float: right;
  width: 165px;
  height: 100%;
}

#main-bar-e {
  width: 98%;
  margin: 0 auto;
  height: 255px;
}

#all-cycle-e {
  width: 100%;
  height: 295px;
}

#table-today {
  width: 100%;
  height: 285px;
  overflow: hidden;
}

.table-more {
  width: 100%;
  overflow: hidden;

  &-select {
    text-align: center;
    height: 55px;
  }

  &-paging {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
}
</style>